<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>电话：{{ tel }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeSex">修改性别</button>
    <button @click="showTel">查看联系方式</button>


  </div>

</template>

<!--<script lang="ts">-->
<!--export default {-->
<!--  name: 'Person',-->
<!--}-->

<!--</script>-->


<script setup lang="ts" name="Person">

  let name = '张三' // 注意此时name 不是响应式的（点击一下变化）
  let sex = '男' // 注意此时sex 不是响应式的（点击一下变化）
  let tel = '1599999999' // 注意此时tel 不是响应式的（点击一下变化）
  let address = '福建福州'

  function changeName() {
    name = 'zhangsan' //这样修改name 页面不会发生变化
    console.log(name) // name 已经修改，但name不是响应式的

  }

  function changeSex() {
    sex = '女' //这样修改sex 页面不会发生变化
    console.log(sex) // sex 已经修改，但sex不是响应式的

  }

  function showTel() {
    alert(tel)
  }


</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

</style>